<template>
  <view class="layout">
    <wd-navbar
      title="学生绑定"
      placeholder
      :left-arrow="showBack"
      :style="{ marginTop: `${navHeight}px` }"
      @click-left="handleClickLeft"
    />
    <view class="content">
      <view class="title"> 选择学校 </view>
      <wd-picker
        v-model="selectArea"
        :columns="columns"
        :column-change="onChangeDistrict"
        :display-format="displayFormat"
        :loading="loading"
        clearable
        mt-30
        placeholder="请选择省市区"
        class="custom-picker"
      />
      <wd-picker
        v-model="selectSchool"
        :columns="schoolColumns"
        placeholder="请选择学校"
        clearable
        class="custom-picker"
        @confirm="handleConfirm"
      />
    </view>
    <view class="flex-center">
      <wd-button type="primary" size="large" class="confirm" @click="next">
        下一步
      </wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import CommonApi from "@/api/common";
import { useConfigStore } from "@/store/config";

const configStore = useConfigStore();
const { areaList } = storeToRefs(configStore);

const navHeight = ref(0);
navHeight.value = configStore.systemBarHeight;

definePage({
  style: {
    navigationBarTitleText: "学生绑定选择学校",
    navigationStyle: "custom",
  },
});
const loading = ref(false);
const showBack = ref(false);

const columns = ref({});

const selectArea = ref([]);

const schoolColumns = ref([]);

const selectSchool = ref("");

watch(
  selectArea,
  async (newVal) => {
    console.log("newVal:", newVal);
    if (newVal.length === 3) {
      const res = await CommonApi.queryCompanyByAreaCode({
        provinceCode: newVal[0],
        cityCode: newVal[1],
        areaCode: newVal[2],
      });
      // schoolColumns.value = res.data.map((item) => {
      //   return {
      //     label: item.companyName,
      //     value: item.companyId,
      //   }
      // }) || [[]]
      const schooleList = res.map((item) => {
        return {
          label: item.companyName,
          value: item.companyId,
        };
      }) || [
        {
          label: "其他学校",
          value: "1",
        },
      ];
      schoolColumns.value = [[...schooleList]];
      selectSchool.value = schooleList[0].value;
      console.log("schoolColumns:", schoolColumns.value);
      console.log("res:", res);
    }
  },
  { immediate: true, deep: true },
);
onLoad(async (options) => {
  console.log("传入参数:", options);
  if (options?.showBack) {
    showBack.value = true;
  }
  loading.value = true;
  await configStore.getAreaList(0);
  loading.value = false;
  columns.value = initColumns();
});

function initColumns() {
  if (areaList.value[0] && !areaList.value[areaList.value[0][0].value]) {
    return [areaList.value[0]];
  } else if (
    areaList.value[0] &&
    areaList.value[areaList.value[0][0].value] &&
    !areaList.value[areaList.value[areaList.value[0][0].value][0].value]
  ) {
    return [areaList.value[0], areaList.value[areaList.value[0][0].value]];
  } else if (
    areaList.value[0] &&
    areaList.value[areaList.value[0][0].value] &&
    areaList.value[areaList.value[areaList.value[0][0].value][0].value]
  ) {
    return [
      areaList.value[0],
      areaList.value[areaList.value[0][0].value],
      areaList.value[areaList.value[areaList.value[0][0].value][0].value],
    ];
  } else {
    return [];
  }
}

async function onChangeDistrict(pickerView, value, columnIndex, resolve) {
  const item = value[columnIndex];

  if (columnIndex === 0) {
    loading.value = true;
    await configStore.getAreaList(value[columnIndex].value);
    loading.value = false;
    pickerView.setColumnData(1, areaList.value[item.value]);
    pickerView.setColumnData(
      2,
      areaList.value[areaList.value[item.value][0].value],
    );
  } else if (columnIndex === 1) {
    loading.value = true;
    await configStore.getAreaList(value[columnIndex].value);
    loading.value = false;
    pickerView.setColumnData(2, areaList.value[item.value]);
  }
  resolve();
}

function displayFormat(items) {
  console.log("items:", items);
  return items
    .map((item) => {
      return item.label;
    })
    .join("-");
}

function handleConfirm({ value }) {
  selectSchool.value = value;
}
function next() {
  console.log("selectArea:", selectArea.value);
  console.log("selectSchool:", selectSchool.value);
  if (!selectArea.value) {
    uni.showToast({
      title: "请选择地区",
      icon: "none",
    });
  }
  if (!selectArea.value[0] || !selectArea.value[1] || !selectArea.value[2]) {
    uni.showToast({
      title: "请选择地区",
      icon: "none",
    });
  }
  if (!selectSchool.value) {
    uni.showToast({
      title: "请选择学校",
      icon: "none",
    });
    return;
  }
  uni.navigateTo({
    url: `/pages-sub/student/studentInfo?showBack=${showBack.value}&province=${selectArea.value[0]}&city=${selectArea.value[1]}&area=${selectArea.value[2]}&companyId=${selectSchool.value}`,
  });
}
function handleClickLeft() {
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.content {
  margin-top: 5%;
  padding: 20px 24px;
}
.title {
  font-size: 18px;
}

:deep(.custom-picker) {
  padding: 0px;
  .wd-picker__confirm {
    display: #007aff;
  }
  .wd-picker__cancel {
    display: #999;
  }
  .wd-cell__value {
    font-size: 18px;
    color: #999999;
  }
  .wd-cell {
    padding-left: 0px;
  }
}

.flex-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 70%;
  .confirm {
    width: 80%;
    border-radius: 10px;
  }
}
</style>
